<template>
  <div class="container" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="goodsItem" v-if="orderInfo.package">
        <div class="goodsImg">
          <img :src="orderInfo.package.package_cover + ossSrc" />
        </div>
        <div class="goodsInfo">
          <div class="goodsName">{{ orderInfo.package.package_name }}</div>
          <div class="goodsType">
            <div class="goodsTypeItem">
              {{ orderInfo.package.package_effect }}
            </div>
          </div>
          <div class="goodsInfoPrice">
            <div>¥{{ orderInfo.package.package_price }}</div>
            <div class="serveTime">
              <span class="iconfont icon-shijian"></span>
              <span>{{ orderInfo.package.package_time }}分钟</span>
            </div>
          </div>
        </div>
      </div>
      <div class="userCont" v-if="orderInfo.technician">
        <div class="userImg">
          <img :src="orderInfo.technician.technician_head_img" />
        </div>
        <div class="userInfo">
          <div class="userName">
            <div class="nameVal">
              {{ orderInfo.technician.technician_nick_name }}
            </div>
            <div class="regTag">认证</div>
          </div>
          <div class="rateCont">
            <van-rate
              size="14px"
              color="#4fc763"
              v-model="orderInfo.technician.rateNum"
              readonly
              allow-half
            />
            <div class="tateVal">好评{{ orderInfo.technician.rate }}分</div>
          </div>
        </div>
      </div>
      <div class="formCont">
        <div class="formHead">
          <div>确认下单</div>
        </div>
        <div class="formList">
          <div class="formItem">
            <van-field
              maxlength="20"
              label="服务城市"
              v-model="cityVal"
              disabled
            />
          </div>
          <div class="formItem">
            <van-field
              maxlength="20"
              label="服务地址"
              v-model="info.service_address"
              placeholder="XX县(区)XX小区"
            />
          </div>
          <div class="formItem">
            <van-field
              maxlength="20"
              label="门牌号"
              v-model="info.house_number"
              placeholder="详细地址，例：X栋X单元XX号"
            />
          </div>
          <div class="formItem">
            <van-field
              maxlength="10"
              label="联系姓名"
              v-model="info.user_name"
              placeholder="请输入联系姓名"
            />
          </div>
          <div class="formItem">
            <van-field
              maxlength="11"
              label="联系电话"
              v-model="info.user_phone"
              placeholder="方便服务人员上门联系"
            />
          </div>
          <div class="formItem">
            <van-field
              v-model="info.service_time"
              is-link
              readonly
              label="服务时间"
              placeholder="请选择服务的时间"
              @click="showTime = true"
            />
            <van-popup v-model:show="showTime" round position="bottom">
              <div class="delMask">
                <div class="dateCheck">
                  <div
                    :class="
                      activeDate == item.date
                        ? 'dateActive dateCheckItem'
                        : 'dateCheckItem'
                    "
                    @click="dateFn(item, index)"
                    :key="index"
                    v-for="(item, index) in orderInfo.appointment_time"
                  >
                    <div class="weekVal" v-if="index == 0">今天</div>
                    <div class="weekVal" v-if="index == 1">明天</div>
                    <div class="weekVal" v-if="index > 1">{{ item.week }}</div>
                    <div>
                      {{ item.date.split("-")[1] }}-{{
                        item.date.split("-")[2]
                      }}
                    </div>
                  </div>
                </div>
                <div class="timeCont">
                  <div
                    :class="index % 4 == 0 ? 'timeItem noLeft' : 'timeItem'"
                    :key="index"
                    v-for="(item, index) in timeArr"
                  >
                    <div
                      @click="timeFn(item)"
                      :class="
                        activeTime == item
                          ? 'activeTimeMain timeItemMain'
                          : 'timeItemMain'
                      "
                    >
                      <span>{{ item.time }}</span>
                      <div class="disTag" v-if="item.is_yd == 2">
                        <span class="disTagText">不可约</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="noTime" v-if="timeArr.length == 0">
                  今日暂无服务时间,请选择其他时间～
                </div>
                <saveBtn
                  color="#4fc763"
                  :style="
                    timeArr.length == 0 || activeTime == ''
                      ? 'opacity: 0.5;'
                      : ''
                  "
                  value="确认选择"
                  @saveClick="saveTime"
                ></saveBtn>
              </div>
            </van-popup>
          </div>
          <div class="formItem">
            <van-field
              maxlength="6"
              label="邀请码"
              v-model="info.user_code"
              placeholder="没有邀请码可不填"
            />
          </div>
          <div class="formItem noBorder">
            <van-field
              rows="4"
              label="服务备注"
              autosize
              v-model="info.service_remark"
              type="textarea"
              maxlength="150"
              placeholder="若有其他需求，请备注。（例如：可提前来，请尽快联系我，来之前打电话）"
              show-word-limit
            />
          </div>
        </div>
      </div>
      <div class="formCont hasMargin">
        <div class="formHead">
          <div>出行信息</div>
        </div>
        <div class="formList">
          <div class="formItem">
            <van-field v-model="carType" readonly label="出行" disabled />
          </div>
          <div class="formItem flexCenter noBorder">
            <div>
              <van-field
                v-model="orderInfo.car_price"
                readonly
                label="车费"
                disabled
              />
            </div>
            <div>元</div>
          </div>
        </div>
      </div>
      <div class="ctrlCont">
        <div class="leftBtn">待支付：{{ orderInfo.order_total_price }}元</div>
        <div class="rightBtn" @click="sureFn">立即购买</div>
      </div>
    </div>
    <van-popup v-model:show="showConfirm" round position="bottom">
      <div class="orderMask">
        <div class="maskTitle">下单提示</div>
        <div class="maskTip">
          <p>平台只接受"海南省海口市内"上门服务，超出范围请勿下单！</p>
          <p>
            下单之后技师将在60分钟内接单，若超出接单时间，金额原路退回到用户账户，请放心预约。
          </p>
        </div>
        <saveBtn
          color="#4fc763"
          style="width: 100%;margin-top: 0.75rem;"
          value="确认下单"
          @saveClick="sureMask"
        ></saveBtn>
      </div>
    </van-popup>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <getLoad v-if="!showCont"></getLoad>
    <sub-load v-if="showLoad"></sub-load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import { orderSub, orderSave } from "@/http/api";
import WeixinJSBridge from "weixin-js-sdk";
import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import saveBtn from "@/components/public/saveBtn.vue";
import { Toast } from "vux";
import subLoad from "@/components/public/subLoad.vue";

export default {
  components: { subLoad, Toast, getLoad, getTimeOut, saveBtn },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showText: "",
      showToast: false,
      info: {
        package_id: this.$route.query.package_id,
        technician_id: this.$route.query.technician_id,
        service_address: "",
        house_number: "",
        user_name: "",
        user_phone: "",
        service_time: "",
        service_remark: "",
        user_code: ""
      },
      carMoney: "10元",
      carType: "滴滴 | 出租",
      cityVal: "海南省海口市",
      delArr: [
        { text: "重新预约,并通知我", value: 0 },
        { text: "全额退款,并通知我", value: 1 }
      ],
      showTime: false,
      timeArr: [],
      activeDate: "",
      activeTime: "",
      orderInfo: {},
      showLoad: false,
      showConfirm: false
    };
  },
  props: {},
  methods: {
    dateFn(item) {
      this.activeDate = item.date;
      this.timeArr = item.time;
      this.activeTime = "";
    },
    timeFn(item) {
      if (item.is_yd == 1) {
        this.activeTime = item;
      }
    },
    sureMask() {
      let data = this.info;
      if (data.service_address.length <= 2) {
        this.showToast = true;
        this.showText = "请输入服务地址";
        return false;
      } else if (data.house_number.length <= 2) {
        this.showToast = true;
        this.showText = "请输入门牌号";
        return false;
      } else if (data.user_name.length == "") {
        this.showToast = true;
        this.showText = "请输入联系姓名";
        return false;
      } else if (!this.$converData.checkPhone(data.user_phone)) {
        this.showToast = true;
        this.showText = "请输入正确电话";
        return false;
      } else if (!data.service_time) {
        this.showToast = true;
        this.showText = "请选择服务时间";
        return false;
      } else if (data.user_code != "" && data.user_code.length != 6) {
        this.showToast = true;
        this.showText = "请填写正确邀请码";
        return false;
      }
      if (!this.showLoad) {
        this.showLoad = true;
        orderSave(data)
          .then(res => {
            if (res.data.code == 1) {
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: res.data.data.appId, //公众号ID，由商户传入
                  timeStamp: res.data.data.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: res.data.data.nonceStr, //随机串
                  package: res.data.data.package,
                  signType: res.data.data.signType, //微信签名方式：
                  paySign: res.data.data.paySign //微信签名
                },
                resData => {
                  if (resData.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.showToast = true;
                    this.showText = "支付成功";
                    setTimeout(() => {
                      this.$router.replace({ path: "/order" });
                    }, 1000);
                  } else {
                    this.showToast = true;
                    this.showText = "支付失败";
                  }
                }
              );
            } else {
              this.showToast = true;
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(err => {
            console.log(err);
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络请求超时";
          });
      }
    },
    sureFn() {
      this.showConfirm = true;
    },
    saveTime() {
      if (this.activeTime) {
        this.info.service_time = this.activeDate + " " + this.activeTime.time;
        this.showTime = false;
      }
    },
    getData() {
      let data = {
        package_id: this.$route.query.package_id,
        technician_id: this.$route.query.technician_id
      };
      orderSub(data)
        .then(res => {
          if (res.data.code == 1) {
            let num = Number(
              (Number(res.data.data.technician.technician_score) / 20).toFixed(
                1
              )
            );
            if (num < 4.8) {
              num = 4.8;
            }
            res.data.data.technician["rate"] = num.toFixed(1);
            res.data.data.technician["rateNum"] = num;
            console.log(res.data.data.technician);
            this.orderInfo = res.data.data;
            this.timeArr = res.data.data.appointment_time[0].time;
            this.activeDate = res.data.data.appointment_time[0].date;
            if (res.data.data.user_order_address) {
              let address = res.data.data.user_order_address;
              this.info.service_address = address.service_address;
              this.info.house_number = address.house_number;
              this.info.user_name = address.user_name;
              this.info.user_phone = address.user_phone;
            }
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    }
  },
  mounted() {},
  created() {
    // this.getTime()
    this.getData();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  background-color: #f7f8fa;
  padding-top: 1rem;
  padding-bottom: 3.75rem;
  box-sizing: border-box;
  .goodsItem {
    width: 92%;
    margin: 0 auto;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 1rem;
    display: flex;
    border-radius: 0.25rem;
    align-items: center;
    .goodsImg {
      width: 4rem;
      height: 4rem;
      overflow: hidden;
      border-radius: 0.25rem;
      margin-right: 0.5rem;
      img {
        width: 100%;
      }
    }
    .goodsInfo {
      width: 0.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 4rem;
      justify-content: space-between;
      .goodsName {
        width: 100%;
        line-height: 1rem;
        font-size: 0.7rem;
      }
      .service_time {
        font-size: 0.6rem;
        color: #666;
      }
      .goodsType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .goodsNumCont {
          display: flex;
          height: 1rem;
          line-height: 1rem;
          color: #999;
          font-size: 0.6rem;
          align-items: center;
        }
        .goodsTypeItem {
          padding: 0.1rem 0.5rem;
          background-color: #f6f6f6;
          font-size: 0.6rem;
          height: 1rem;
          line-height: 1rem;
          border-radius: 0.75rem;
          color: #999;
        }
      }
      .goodsInfoPrice {
        color: #999;
        display: flex;
        justify-content: space-between;
        font-size: 0.6rem;
        .serveTime {
          display: flex;
          align-items: center;
          .iconfont {
            margin-right: 0.25rem;
          }
        }
      }
    }
  }
  .userCont {
    width: 92%;
    margin: 0.75rem 4%;
    padding: 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    .userImg {
      width: 2.5rem;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .userInfo {
      flex: 1;
      margin-left: 0.75rem;
      .userName {
        display: flex;
        align-items: center;
        .nameVal {
          font-size: 0.7rem;
        }
        .regTag {
          padding: 0.05rem 0.5rem;
          background-color: #4fc763;
          color: white;
          border-radius: 0.15rem;
          font-size: 0.6rem;
          margin-left: 0.5rem;
        }
      }
      .rateCont {
        align-items: center;
        display: flex;
        font-size: 0.6rem;
        margin-top: 0.25rem;
        .tateVal {
          margin-left: 0.75rem;
          color: #666;
        }
      }
    }
  }
  .formCont {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 4%;
    border-radius: 0.25rem;
    background-color: #fff;
    box-sizing: border-box;
    .formHead {
      font-size: 0.75rem;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.75rem;
    }
    .formList {
      width: 100%;
      .formItem {
        padding: 0.25rem 0;
        width: 100%;
        display: flex;
        position: relative;
        border-bottom: 1px solid rgb(245, 245, 245);
        .formName {
          width: 4rem;
          font-size: 0.7rem;
          color: #646566;
          margin-right: 0.75rem;
          box-sizing: border-box;
        }
        .delMask {
          padding: 0.75rem;
          box-sizing: border-box;
          .dateCheck {
            background-color: #fff;
            width: 100%;
            padding: 0.5rem 0;
            box-sizing: border-box;
            font-size: 0.6rem;
            box-sizing: border-box;
            // justify-content: space-between;
            overflow-x: auto;
            white-space: nowrap;
            .dateCheckItem {
              display: inline-block;
              white-space: nowrap;
              border-radius: 0.25rem;
              padding: 0.35rem 0.7rem;
              box-sizing: border-box;
              position: relative;
              margin-right: 4%;
              border: 1px solid #4fc763;
              color: #4fc763;
              text-align: center;
              .weekVal {
                font-size: 0.8rem;
                margin-bottom: 0.25rem;
              }
            }
            .dateActive {
              background-color: #4fc763;
              color: #fff;
            }
          }
          .timeCont {
            display: flex;
            flex-wrap: wrap;
            max-height: 15rem;
            overflow-y: auto;
            box-sizing: border-box;
            margin-top: 0.75rem;
            margin-bottom: 0.75rem;
            .timeItem {
              width: 22%;
              margin-left: 4%;
              box-sizing: border-box;
              text-align: center;
              .timeItemMain {
                background-color: #f7f7f7;
                border: 1px solid #f7f7f7;
                width: 100%;
                padding: 0.75rem 0;
                box-sizing: border-box;
                border-radius: 0.25rem;
                margin-bottom: 0.75rem;
                position: relative;
                overflow: hidden;
                .disTag {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  background-color: rgba(255, 255, 255, 0.5);
                  text-align: right;
                  display: flex;
                  justify-content: flex-end;
                  .disTagText {
                    transform: scale(0.7);
                    color: #4fc763;
                    position: relative;
                    top: -0.3rem;
                    left: 0.2rem;
                  }
                }
                .fullTag {
                  position: absolute;
                  right: 0;
                  top: 0;
                  padding: 0.05rem 0.15rem;
                  font-size: 0.6rem;
                  // background-color: #ebebeb;
                }
              }
              .bindTime {
                background-color: #ebebeb;
                border: 1px solid #ebebeb;
                color: #666;
              }
              .activeTimeMain {
                border: 1px solid #4fc763;
                background-color: #4fc763;
                color: #fff;
              }
            }
            .noLeft {
              margin-left: 0;
            }
          }
          .noTime {
            color: #666;
            text-align: center;
            margin-bottom: 1rem;
          }
        }
      }
      .flexCenter {
        align-items: center;
      }
      .noBorder {
        border-bottom: none;
      }
    }
  }
  .hasMargin {
    margin-top: 0.75rem;
  }

  .orderTip {
    width: 92%;
    margin: 0.75rem auto;
    font-size: 0.6rem;
    color: #666;
  }
  .ctrlCont {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    align-items: center;
    .leftBtn {
    }
    .rightBtn {
      font-size: 0.7rem;
      background-color: #4fc763;
      color: white;
      padding: 0.5rem 2.5rem;
      border-radius: 1rem;
      letter-spacing: 0.2rem;
    }
  }
  .orderMask {
    padding: 0.75rem;
    box-sizing: border-box;
    .maskTitle {
      font-size: 0.8rem;
      font-weight: bold;
      text-align: center;
    }
    .maskTip {
      margin-top: 0.5rem;
      line-height: 1.1rem;
    }
  }
}
</style>
